<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">退单列表</block>
		</cu-custom>
		<view class="fixed">
			<scroll-view slot="top" scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub text-blue" :class="index==tabCur?'cur ':''"
						v-for="(item,index) in tabList" :key="index" @tap="tabSelect" :data-id="index">
						{{item}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view style="top: unset !important; margin-top: 90rpx;">
			<view v-for="(order,orderIndex) in list" :key="orderIndex" class="solid-bottom bg-white">
				<view class="flex justify-between align-center padding-top padding-right-sm">
					<view class="cu-bar" style="min-height: 50rpx;">
						<view class="action">
							<text class="cuIcon-title text-blue"></text>
						</view>
						<view class="action">
							<view>{{order.createTime}}</view>
						</view>
					</view>
					<view>
						<view class='cu-tag radius ' :class="order.status <= '2' ? 'line-red':'line-blue'">
							{{order.statusDesc}}
						</view>
					</view>

				</view>
				<view class="flex p-xs mb-sm" v-if="order.orderItem">
					<view class="flex-sub padding-lr-sm padding-top-sm"> <img :src="order.orderItem.picUrl" alt=""
							style="height:100px;width:100px;" />
					</view>
					<view class="flex-twice padding-top-sm padding-lr-xs">
						<view class="hx-overflow-2">{{order.orderItem.spuName}}</view>
						<view class="text-grey" v-if="order.orderItem.specsInfo">{{order.orderItem.specsInfo}}</view>
					</view>
				</view>
				<view class="padding-lr-sm">
					<view>
						退款金额 ：<text class="text-red text-price text-xxl">{{order.refundAmount}}</text>
					</view>
					<view>
						退款/退货原因 ：<text class="text-black">{{order.refundReason}}</text>
					</view>
				</view>
				<view class="flex p-xs mb-sm">
					<view class="flex-sub">
					</view>
					<view class="flex-twice padding-top-xs padding-lr-xs">
						<view class="cu-bar btn-group">
							<button class="cu-btn round bg-red submit margin-right-xs"
								v-if="order.status == '1' || order.status == '2'" @tap="onOperation(order)">操作</button>
							<button class="cu-btn round bg-blue submit margin-left-xs"
								@tap="onDetail(order.id)">详情</button>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="cu-load bg-gray" :class="isLoad?'loading':'over'">
		</view>
		<view class="cu-modal bottom-modal" :class="modalName?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="content">退单操作</view>
					<view class="action text-blue" @tap="modalName=false">取消</view>
					<view class="action text-green" @tap="onSubmit">确定</view>
				</view>
				<view class="padding-xl">
					<radio-group class="block" @change="radioChange">

						<view class="cu-list menu text-left" v-if="selectedRefund.status == '1'">
							<view class="cu-item">
								<label class="flex justify-between align-center flex-sub">
									<view class="flex-sub">同意退款</view>
									<radio class="round" :class="modalStatus=='11'?'checked':''"
										:checked="modalStatus=='11'?true:false" value="11"></radio>
								</label>
							</view>
							<view class="cu-item">
								<label class="flex justify-between align-center flex-sub">
									<view class="flex-sub">拒绝退款</view>
									<radio class="round" :class="modalStatus=='21'?'checked':''"
										:checked="modalStatus=='21'?true:false" value="21"></radio>
								</label>
							</view>
						</view>
						<view class="cu-list menu text-left" v-if="selectedRefund.status == '2'">
							<view class="cu-item">
								<label class="flex justify-between align-center flex-sub">
									<view class="flex-sub">同意退货退款</view>
									<radio class="round" :class="modalStatus=='12'?'checked':''"
										:checked="modalStatus=='12'?true:false" value="12"></radio>
								</label>
							</view>
							<view class="cu-item">
								<label class="flex justify-between align-center flex-sub">
									<view class="flex-sub">拒绝退货退款</view>
									<radio class="round" :class="modalStatus=='22'?'checked':''"
										:checked="modalStatus=='22'?true:false" value="22"></radio>
								</label>
							</view>
						</view>
						<view v-if="modalStatus == '21' || modalStatus == '22'" class="cu-form-group align-start">
							<view class="title">拒绝原因</view>
							<textarea maxlength="-1" placeholder="请输入拒绝原因" @input="textareaInput"></textarea>
						</view>

					</radio-group>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getPage,
		refundObj
	} from '@/api/mall/orderrefund.js'
	export default {
		data() {
			return {
				tabCur: 0,
				tabList: ['全部', '退款中', '退货退款中', '同意退款', '同意退货退款', '拒绝退款', '拒绝退货退款'],
				queryParams: {},
				status: 0,
				page: {
					total: 0,
					currentPage: 1,
					pageSize: 10,
					descs: 'create_time',
				},
				list: [],
				isLoad: true,
				modalName: false,
				selectedRefund: {},
				modalStatus: '',
				refuseReason: ''
			}
		},
		onLoad(option) {
			if (option.status) {
				this.status = option.status;
				this.tabCur = option.status;
			}
		},
		onShow() {
			this.refreshPage()
		},
		onReachBottom() {
			if (this.isLoad) {
				this.page.currentPage = this.page.currentPage + 1;
				this.initPage();
			}
		},
		onPullDownRefresh() {
			// 在当前页面显示导航条加载动画。
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#ff0000',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
			this.refreshPage();
			uni.hideNavigationBarLoading(); // 在当前页面隐藏导航条加载动画。
			uni.stopPullDownRefresh();
		},

		methods: {
			initPage() {
				let params = {
					current: this.page.currentPage,
					size: this.page.pageSize,
					descs: this.page.descs,
					status: this.status == 0 ? '' : this.status,
				}
				getPage(Object.assign(params, this.queryParams)).then(res => {
					let orderInfoList = res.data.records;
					this.list = [...this.list, ...orderInfoList];
					if (orderInfoList.length < this.page.pageSize) {
						this.isLoad = false;
					}
				})
			},
			refreshPage() {
				this.isLoad = true;
				this.list = [];
				this.page.currentPage = 1;
				this.initPage();
			},
			onDetail(id) {
				uni.navigateTo({
					url: "/pages/mall/orderrefund/refund-detail/index?id=" + id
				})
			},
			onOperation(item) {
				this.selectedRefund = item;
				this.modalName = true;
				this.modalStatus = "";
				this.refuseReason = ""
			},
			radioChange(e) {
				console.log(e.detail.value)
				this.modalStatus = e.detail.value;
			},
			tabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.status = e.currentTarget.dataset.id;
				this.refreshPage();
			},
			onSubmit() {
				if (!this.modalStatus) {
					uni.showToast({
						title: '请选择操作状态',
						icon: 'none',
						duration: 3000
					});
					return;
				}
				if (this.modalStatus >= '21' && !this.refuseReason) {
					uni.showToast({
						title: '请输入拒绝原因',
						icon: 'none',
						duration: 3000
					});
					return;
				}
				if (this.selectedRefund) {
					refundObj({
						id: this.selectedRefund.id,
						status: this.modalStatus,
						refuseReason: this.refuseReason
					}).then(res => {
						this.refreshPage()
					})

				}
			},
			textareaInput(e) {
				this.refuseReason = e.detail.value
			}
		}
	}
</script>

<style>
</style>
